<template>
  <div >
    <div >
      <el-main>
        <!-- main -->
        <el-row :gutter="20" >
              <el-col :span="24" style="padding-top:40px;display:flex; flex-direction: column;width:100%">
                  <div class="grid-content bg-purple" style="display:flex;flex:1 ;height:166px; margin:20px 0px">
                    <!-- 第一层左边  w54.35%-->
                      <div class="first-1" style="box-sizing:border-box;padding:20px ;height:166px; width: 54.35% ;border-radius:20px ;display:flex; flex-direction: column; line-height:20px ">
                            <div class="top" style="display:flex">
                              <p style="-webkit-box-align: center;color: #333;;font-weight: 600;;font-size: 16px;font-family: PingFangSC-Semibold,PingFang SC;">日销售统计</p>
                            </div>
                            <div class="mid"  v-if="newdata4.length" style="display:flex ;justify-content:space-between">
                                <div><p class="color1">{{newdata9}}</p><span class="color2 ">当日销售量(个)</span></div>
                                <div><p class="color1">{{newdata10}}</p><span class="color2 ">当日销售额(个)</span></div>
                                <div><p class="color1">{{newdata8}}</p><span class="color2 ">当日分成(个)</span></div>
                            </div>
                      </div>
                    <!-- 第一层右边 -->
                      <div class="first-2 " style="box-sizing:border-box;padding:20px;height:166px ; width:45.65%;margin-left:20px;border-radius:20px;display:flex; flex-direction: column; line-height:20px">
                          <div class="top" style="display:flex" >
                                  <p style="-webkit-box-align: center;color: #333;;font-weight: 600;;font-size: 16px;font-family: PingFangSC-Semibold,PingFang SC;">月销售统计</p>
                          </div>
                            <div class="mid" style="display:flex ;justify-content:space-around"  v-if="newdata5">
                                <div><p class="color3">{{newdata5}}</p><span class="color4 ">当月销售量(个)</span></div>
                                <div><p class="color3">{{newdata6}}</p><span class="color4 ">当月销售额(元)</span></div>
                                <div><p class="color3">{{newdata7}}</p><span class="color4 ">当月分成(元)</span></div>
                            </div>
                      </div>
                  </div>

              </el-col>
        </el-row >
        <el-row :gutter="24" style=";min-height:60px;border-radius:20px ;margin-top:20px;margin: 20px 0px 0;display:flex;line-height:20px">
              <!-- 合作商  日期 查询 栏 -->
            <div class="search" style="width:100%;height:64px;padding-left:17px;display:flex">
             <span style="width:73px;height:36px;padding-right:12px;font-size:14px;line-height:36px;margin-left:10px">合作商:</span>
             <el-select clearable  filterable placeholder="请选择合作商" v-model="searchinfo.partnerName">
                <el-option  v-for="item in partner.currentPageRecords" :key="item.id" :label="item.name" :value="item.name" style="width:210px;height:36px"/>
             </el-select>
             <span style="width:73px;height:36px;padding-right:12px;font-size:14px;line-height:36px;margin-left:10px">日期:</span>
             <!-- 时间选择器 -->
              <div class="block">
                    <el-date-picker
                    style="width:412px"
                      v-model="datapick"
                      value-format="yyyy-MM-dd"
                      type="daterange"
                      unlink-panels
                      @change="datapickchange"
                      range-separator="~"
                      :start-placeholder="$moment().startOf('months').format('YYYY-MM-DD')"
                      :end-placeholder="$moment().endOf('months').format('YYYY-MM-DD')">

                    </el-date-picker>
              </div>
             <el-button type="primary" icon="el-icon-search" style="padding:10px 15px;margin-left:10px;width:80px;height:38px;display:flex ;background-color:#5375E0" class="search-button" @click="searchbtn">查询</el-button>
            </div>
        </el-row>
            <div style="width:100% ;height:50px;display:flex;padding:20px 0 0 18px">
              <div style="font-size:14px;color:#333333;line-height:36px;margin-left:20px"> 笔数统计:<span style="color:red;font-size:20px">{{newdata12}}</span>个</div>
              <div style="font-size:14px;color:#333333;line-height:36px;margin-left:60px"> 收入统计:<span style="color:red;font-size:20px">{{(newdata13/100).toFixed(2)}}</span>元</div>
              <div style="font-size:14px;color:#333333;line-height:36px;margin-left:60px"> 分成统计:<span style="color:red;font-size:20px">{{(newdata11/100).toFixed(2)}}</span>元</div>
            </div>
        <!-- 表格栏 -->
        <el-row :gutter="24" style=";border-radius:20px;;margin-top:20px;margin: 20px 0px 0;display:flex;line-height:20px">
              <el-table   style="width:100% ;fontSize:14px" :data="renderlist.currentPageRecords">
                  <el-table-column style="height:42px" type="index" fit label="序号" />
                  <el-table-column style="height:42px" fit label="订单日期" prop="date" />
                  <el-table-column style="height:42px"  fit label="合作商" prop="ownerName"/>
                  <el-table-column style="height:42px"  fit label="分成比例" prop="ratio" :formatter="ratioFn"/>
                  <el-table-column style="height:42px"  fit label="收入(元)"  prop="orderTotalMoney" :formatter="orderTotalMoneyFn"/>
                  <el-table-column style="height:42px"  fit label="笔数" prop="orderCount"/>
                  <el-table-column style="height:42px" fit label="分成金额(元)" prop="totalBill"  :formatter="totalBillFn"/>
              </el-table>
        </el-row>
                <div class="pageinfo" style="width:100%;height:96px;padding:32px 16px;line-height:32px;display:flex;justify-content:space-between">
                    <span>共{{ renderlist.totalCount}}条记录  第{{renderlist.pageIndex}}/{{renderlist.totalPage}} 页</span>
                    <div style="display:flex">
                      <el-button class="pagebutton" :disabled="renderlist.pageIndex?renderlist.pageIndex==='1':true" style="width:70px;height:32px;padding:0 0" @click="pageup">上一页</el-button>
                      <el-button class="pagebutton" :disabled="renderlist.pageIndex===renderlist.totalPage?true:false" style="width:70px;height:32px;padding:0 0" @click="pagedown">下一页</el-button>
                    </div>
                </div>
      </el-main>
    </div>
  </div>
</template>

<script>
import { topinfo, orderCount, orderAmount } from '@/api/cellinfo'
import { getpartnerinfo, gettotalbill, getpartnerCollect } from '@/api/rectotal'
export default {
  mounted () {
  },
  components: {

  },
  data () {
    return {
      timeinfo: { type: '', starttime: '', endtime: '' },
      newdata4: [],
      newdata5: 0,
      newdata6: 0,
      newdata7: 0,
      newdata8: 0,
      newdata9: 0,
      newdata10: 0,
      newdata11: 0,
      newdata12: 0,
      newdata13: 0,

      data: {

      },
      partner: {},
      datapick: ['0', '1'],
      searchinfo: {
        partnerName: '',
        start: '',
        end: '',
        pageIndex: 1,
        pageSize: 10
      },
      renderlist: {}

    }
  },
  computed: {
    timenow () { return this.$moment().format('YYYY-MM-DD') },
    monthBefore () { return this.$moment().startOf('months').format('YYYY-MM-DD') }
  },
  async created () {
    const { data: data4 } = await topinfo(this.monthBefore, this.timenow)
    // console.log(data4);//data4头部是数据
    this.newdata4 = data4
    const { data: data5 } = await orderCount(this.monthBefore, this.timenow)
    console.log(data5)// data5头部右侧  总订单数
    this.newdata5 = data5
    const { data: data6 } = await orderAmount(this.monthBefore, this.timenow)
    console.log(data6)// data6头部右侧  销售总额
    this.newdata6 = (data6 / 100).toFixed(2)
    const { data: data7 } = await gettotalbill(this.monthBefore, this.timenow)
    this.newdata7 = (data7 / 100).toFixed(2)
    console.log(data7)// data7月分成
    const { data: data8 } = await gettotalbill(this.timenow, this.timenow)
    this.newdata8 = data8// 日分成
    const { data: data9 } = await orderCount(this.timenow, this.timenow)
    this.newdata9 = data9// 日销售数量
    const { data: data10 } = await orderAmount(this.timenow, this.timenow)
    this.newdata10 = data10// 日销售额

    // 获取合作商信息
    const { data } = await getpartnerinfo({
      pageIndex: 1,
      pageSize: 100000
    })
    console.log(data)
    this.partner = data
    // this.renderlist = data
  },
  methods: {
    datapickchange () {
      this.searchinfo.start = this.datapick[0]
      this.searchinfo.end = this.datapick[1]
    },
    async searchbtn () {
      const { data } = await getpartnerCollect(this.searchinfo)
      this.renderlist = data
      // 搜索的笔数 收入 分成 统计
      const { data: data11 } = await gettotalbill(this.searchinfo.start, this.searchinfo.end)
      this.newdata11 = data11// 分成
      const { data: data12 } = await orderCount(this.searchinfo.start, this.searchinfo.end, this.searchinfo.partnerId)
      this.newdata12 = data12// 销售数量
      // const { data: { partnerinfo } } = await getpanterinfo(this.searchinfo.partnerName)
      // console.log(partnerinfo)
      const partnerId = this.partner.currentPageRecords.filter(item => item.name === this.searchinfo.partnerName)[0].id
      console.log(partnerId)
      const { data: data13 } = await orderAmount(this.searchinfo.start, this.searchinfo.end, partnerId)
      this.newdata13 = data13// 销售额
    },
    async pageup () {
      if (this.searchinfo.pageIndex !== '1') {
        this.searchinfo.pageIndex--
        const { data } = await getpartnerCollect(this.searchinfo)
        this.renderlist = data
      }
    },
    async pagedown () {
      if (this.searchinfo.pageIndex !== this.searchinfo.totalPage) {
        this.searchinfo.pageIndex++
        const { data } = await getpartnerCollect(this.searchinfo)
        this.renderlist = data
      }
    },
    ratioFn (row, column, cellValue) {
      return (cellValue + '%')
    },
    orderTotalMoneyFn (row, column, cellValue) {
      if (cellValue > 0) { return ('+' + (cellValue / 100).toFixed(1)) } else { return ('-' + (cellValue / 100).toFixed(1)) }
    },
    totalBillFn (row, column, cellValue) {
      if (cellValue > 0) { return ('+' + (cellValue / 100).toFixed(2)) } else { return ('-' + (cellValue / 100).toFixed(2)) }
    }
    // async getpartnerinfo () {
    //   const { data } = await getpartnerinfo()
    //   console.log(data)
    //   this.partner = data
    // }
  }
}

</script>

<style lang='less' scoped>
  .el-main {
    padding: 20px;
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;

    .mid{
      margin-top: 30px;

      .color1{
        text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
        color: #072074;
        height: 50px;
        font-size: 36px;
        font-family: PingFangSC-Semibold,PingFang SC;
        font-weight: 600;
        line-height: 50px;
      }
      .color2{
       color: #91a7dc;
       font-size:12px ;
      }
      .color3{
        text-shadow: 2px 4px 7px rgb(255 99 85 / 50%);;
        color: #ff5757;;
        height: 50px;
        font-size: 36px;
        font-family: PingFangSC-Semibold,PingFang SC;
        font-weight: 600;
        line-height: 50px;
      }
      .color4{
       color: #de9690;;
       font-size:12px ;
      }
    }
    .first-1{
    background: #dce9f9;
    background-Image:url(),url(http://likede2-admin.itheima.net/img/task.66b715b7.png);
    background-repeat: no-repeat;
    background-position: 0 0,calc(100% - 12px) 100%;
    }
    .first-2{
    background-color: #fbefe8;
    background: #e9f3ff;
    background: #fbefe8 url(http://likede2-admin.itheima.net/img/sale.606b0d8c.png) no-repeat calc(100% - 12px) 100%;
    background-repeat: no-repeat;
    background-position: 260 52,calc(100% - 12px) 100%;
    }

  }

</style>
